<template>
	<GuiPage
		:customHeader="true"
		:headerStyle="headerStyle"
		:statusBarStyle="statusBarStyle"
		:footerSets="{ height: 140, zIndex: 100, bg: 'transparent' }"
		:isHeaderSized="false"
		:customFooter="true"
	>
		<!-- 自定义头部导航 -->
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<!-- 返回按钮 -->
				<gui-header-leading :onlyBack="true" :buttonStyle="backButtonStyle"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color" :style="titleStyle">商品详情</text>
			</view>
		</view>
		<view slot="gBody" class="index-box pb-5" :class="{ 'mt-2': checkOutStatus != 2 }">
			<view class="height-160"></view>
			<gui-swiper
				:swiperItems="swiperItems"
				:padding="10"
				:spacing="10"
				:width="750"
				indicatorColor="#cccccc"
				:indicatorWidth="10"
				:indicatorHeight="10"
				:height="750"
				:indicatorActiveWidth="38"
			></gui-swiper>
			<view class="height-20"></view>
			<view class="mx-3">
				<view class="gui-text font-size-30">魔力座椅</view>
				<view>
					<text class="gui-text-small font-size-24" style="color: 666666; font-weight: lighter;">
						多功能、可拆装、可折叠、可随意组合的北欧式风格的椅子是我们现目前比较追崇的欧式椅子样式。木材是北欧椅子的灵魂，为了有利于室内保温，在欧式风格的室内装修中，木材占有很高的地位，像我们图上的这种北欧椅子基本上都是采用未经精细加工的原木做成
					</text>
				</view>
			</view>
			<view class="mt-2 mx-3">
				<view class="gui-text font-size-30">选择尺寸</view>
				<view class="mt-1"><gui-stags :tags="skus" defaultBg="gui-bg-grey2" @change="switchTags" :borderRadius="50" checkedBg="main-bg-color2"></gui-stags></view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view slot="gFooter" class="mx-5 ">
			<view class="gui-flex gui-space-between mb-4">
				<button type="default" class="gui-button gui-bg-white width-200 btc-tbr-large">
					<text class="ali-icon main-text-color gui-button-text font-size-40 main-text-color">&#xe65a;</text>
				</button>
				<button type="default" class="gui-button width-440 btc-tbr-large gui-bg-add-card">
					<text class="gui-color-black gui-button-text mr-4">￥500</text>
					<text class="gui-color-black gui-button-text">购买</text>
				</button>
			</view>
			<view class="height-20"></view>
		</view>
	</GuiPage>
</template>
<script>
	import GuiPage from '@/components/guiCom/gui-page.vue';
export default {
	data() {
		return {
			backButtonStyle: 'color:#000000;', // 返回按钮样式
			headerStyle: 'background-color:rgba(255,255,255,0)', // 头部导航样式
			statusBarStyle: 'background-color:rgba(255,255,255,0)', // 状态栏样式
			titleStyle: 'opacity:0', // 导航标题样式
			swiperItems: [
				{
					img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/1.png',
					url: '',
					title: '测试标题 001',
					opentype: 'navigate'
				},
				{
					img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/2.png',
					url: '',
					title: '测试标题 002',
					opentype: 'navigate'
				},
				{
					img: 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/3.png',
					url: '',
					title: '测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
					opentype: 'navigate'
				}
			],
			// 单选数据
			skus: [{ id: 1, text: 'S', checked: false }, { id: 1, text: 'M', checked: true }, { id: 1, text: 'XL', checked: false }]
		};
	},

	onReady: function() {},
	onLoad: function(option) {},
	methods: {
		switchTags: function(data) {
			console.log(data);
		}
	},
	components: {
		GuiPage
	}
};
</script>
<style lang="scss" scoped>

</style>
